<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #big{
            width: 500px;
            height: 5000px;
            background: pink;
        }
        .small{
            width: 100px;
            height: 100px;
        }
        .small1{
            background: lightsalmon;
        }
        .small2{
            background: orange;
            /* position: relative; */
            /* position: absolute; */
            position: fixed;
            /* left: 0; */
            /* top: 0; */
            /* right: 0; */
            /* top: 0; */
            right: 0;
            bottom: 0;
        }
        .small3{
            background: lightcoral;
            width: 150px;
            height: 150px;
        }
        #die{
            width: 500px;
            height: 500px;
            background: darkkhaki;
            margin-right: 50px auto;
            position: relative;
        }
        #son{
            width: 100px;
            height: 100px;
            background: darkorchid;
            position: absolute;
            /* left: 100px; */
            /* top: 100px; */
            /* right: 100px; */
            /* top: 100px; */
            right: 100px;
            bottom: 100px;
        }
    </style>
</head>
<body>
    <!-- 
        1. 定位
            多种元素发生重叠时,使用定位
        2. 属性
            position:relative 相对定位
                     absolute 绝对定位
                     fixed    固定定位
        3. 相对定位
            位置:保留原来的位置
            原点:基于本身的四个角作为原点
        4. 绝对定位
            位置:不保留原来的位置
            原点:基于第一页的四个角作为原点
        5. 固定定位
            位置:不保留原来的位置
            原点:基于可视窗口的四个角作为原点
        6. 流
            body 属于普通文档流
            position 属于定位流,悬停在文档上方
            技巧:
                如何让后辈元素基于祖辈元素的四个角作为原点?
                实现方式:
                    祖辈元素:任意定位(推荐用相对,原因不破坏原有排版)
                    后辈元素:绝对定位
     -->
     <!-- 
        1. 定位优先级
            z-index:数字;
            数字越大,优先级越高
      -->
    <div id="big">
        <div class="small small1"></div>
        <div class="small small2"></div>
        <div class="small small3"></div>
    </div>
    <div id="die">
        <div id="son"></div>
    </div>
</body>
</html>